<template>
  <el-dialog v-model="drawer" title="产品详情" :append-to-body="true" width="500px" @close="close" custom-class="productDetail">
    <el-form size="small" :model="form" :rules="rules" label-width="70px" ref="ruleRefForm">
        <el-form-item label="编号">{{form.code || '-'}}</el-form-item>
        <el-row justify="space-between">
            <el-form-item label="产品" prop="goodsId">
                <el-select v-model="form.goodsId" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in goodsList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="spec">
                <el-cascader v-model="form.spec" :options="specList" />
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
            <el-form-item label="数量" prop="num">
                <el-input-number v-model="form.num" size="small" :min="0" />
            </el-form-item>
            <el-form-item label="折扣" prop="discount">
                <el-input-number v-model="form.discount" size="small" :min="0.01" :step="0.01" :max="1" />
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
            <el-form-item label="单价(元)" prop="price"><span class="red">￥{{ form.price }}</span></el-form-item>
            <el-form-item label="总价(元)" prop="total"><span class="red">￥{{ onVerifyNumberIntegerAndFloat(form.price * (form.num || 0) * (form.discount || 1)) }}</span></el-form-item>
        </el-row>
        <!-- <el-row>
            <el-form-item label="是否开票" prop="isTicket">
                <el-radio-group v-model="form.isTicket">
                    <el-radio :label="1" size="small">是</el-radio>
                    <el-radio :label="2" size="small">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-row> -->
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">保存</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { toRefs, computed, reactive, ref } from 'vue'
import { verifyNumberIntegerAndFloat } from '/@/utils/toolsValidate'
export default {
    name: 'ProductDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({
            form: {
                num: 0,
                price: 5,
                total: 0,
                discount: 1,
                isTicket: 1
            },
            rules: {
                goodsId: [{ required: true, message: '请选择产品', trigger: 'blur' }],
                spec: [{ required: true, message: '请选择规格', trigger: 'blur' }],
                num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
            },
            goodsList: [],
            specList: [{
                value: '1',
                label: '颜色',
                children: [{
                    value: '2',
                    label: '红色'
                },{
                    value: '3',
                    label: '绿色'
                }]
            }]
        })
        const ruleRefForm = ref()
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 保存
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    context.emit('onSubmit', state.form)
                    context.emit('update:dialogDrawer', false)
                }
            })
        }
        // 取消
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        const onVerifyNumberIntegerAndFloat = val => {
            return verifyNumberIntegerAndFloat(val+'')
        }
        return {
            drawer,
            close,
            ruleRefForm,
            submitForm,
            cancelForm,
            onVerifyNumberIntegerAndFloat,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.productDetail{
    .el-form-item{
        align-items: start;
        width: 50%;
    }
    .red{
        color: var(--el-color-danger);
    }
    .el-dialog__footer{
        border-top: 1px solid var(--el-border-color-extra-light);
    }
} 
</style>